<template>
  <!-- editor富文本编辑器 -->
  <div>
    <h3>平台说明设置</h3>
    <div style="border: 1px solid #ccc">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
      />
      <Editor
        style="height: 300px; overflow-y: hidden;"
        v-model="form.content"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
      />
    </div>
    <div style="text-align: right;">
        <a-button @click="saveEdito">保存</a-button>
    </div>
  </div>

  <div>
    <h3>用户协议设置</h3>
    <div style="border: 1px solid #ccc">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef1"
        :defaultConfig="toolbarConfig1"
        :mode="mode"
      />
      <Editor
        style="height: 300px; overflow-y: hidden;"
        v-model="form1"
        :defaultConfig="editorConfig1"
        :mode="mode"
        @onCreated="handleCreated1"
      />
    </div>
    <div style="text-align: right;">
        <a-button @click="saveEdito1">保存</a-button>
    </div>
  </div>
</template>

<script setup>
import '@wangeditor/editor/dist/css/style.css'; // 引入 css
import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
import { getTitleList,updateTitleList } from "../../api/platform";
import { Modal,Message } from '@arco-design/web-vue';
import { getProtocolList,updateProtocol } from "../../api/protocol";

const form = ref({content:''});

const form1 = ref(null)
// url路径
const url = import.meta.env.VITE_APP_API_URL;
// 文件路径
const imgUrl = import.meta.env.VITE_APP_IMG_URL
// 获取平台信息接口信息
const getPlatformInfo = () => {
    getTitleList({}).then(res=>{
        form.value = res.data[0];
    })
}
// 获取用户协议接口信息
const getProtocolInfo = () => {
    getProtocolList().then(res=>{
        form1.value = res.data
    })
}

// 编辑器实例，必须用 shallowRef
const editorRef1 = shallowRef();
// 工具栏配置
const toolbarConfig1 = {
  toolbarKeys: ['bold','italic','fontSize','fontFamily','justifyLeft','justifyRight','justifyCenter','justifyJustify',"lineHeight",'color','bulletedList','numberedList','bgColor','uploadImage','divider','clearStyle','enter','undo']
  // excludeKeys: ["uploadVideo","insertVideo","video"],
};
// 编辑器配置
const editorConfig1 = { 
  placeholder: '请输入内容...' ,
  MENU_CONF: {},
};
// 配置图片上传地址
editorConfig1.MENU_CONF['uploadImage'] = {
  server: `${url}/file/upload`,
  fieldName: 'file',
  customInsert: (res, insertFn) => {
    if (res.code === 200) {
      const imageUrl = `${imgUrl}/${res.data}`
      insertFn(imageUrl, '', '')
    }
  }
}
// 编辑器保存
const saveEdito1 = () => {
  updateProtocol({content:form1.value,protocolId:1}).then(res=>{
    if(res.code == 200){
      Message.success('保存成功');
    }else{
      Message.error('保存失败');
    }
  })
}
// 记录 editor 实例
const handleCreated1 = (editor) => {
  editorRef1.value = editor;
};

// -------------------------------------------------------------------------------

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();
// 工具栏配置
const toolbarConfig = {
  // 取消注释查看默认配置（会显示所有可用工具）
  toolbarKeys: ['bold','italic','fontSize','fontFamily','justifyLeft','justifyRight','justifyCenter','justifyJustify',"lineHeight",'color','bulletedList','numberedList','bgColor','uploadImage','divider','clearStyle','enter','undo']
  // excludeKeys: ["uploadVideo","insertVideo","video"],
};
// 编辑器配置
const editorConfig = { 
  placeholder: '请输入内容...' ,
  MENU_CONF: {},
};
// 配置图片上传地址
editorConfig.MENU_CONF['uploadImage'] = {
  server: `${url}/file/upload`,
  fieldName: 'file',
  customInsert: (res, insertFn) => {
    if (res.code === 200) {
      const imageUrl = `${imgUrl}/${res.data}`
      insertFn(imageUrl, '', '')
    }
  }
}
// 编辑器保存
const saveEdito = () => {
  updateTitleList(form.value).then(res=>{
    if(res.code == 200){
      Message.success('保存成功');
    }else{
      Message.error('保存失败');
    }
  })
}
// 组件销毁时，及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();

  const editor1 = editorRef1.value;
  if (editor1 == null) return;
  editor1.destroy();
});

// 记录 editor 实例
const handleCreated = (editor) => {
  editorRef.value = editor;
};
// 模式（默认模式）
const mode = 'default'; // 或 'simple'

onMounted(() => {
    getPlatformInfo();
    getProtocolInfo();
});
</script>